<template>
  <div class="skill">
    <div class="list" v-for="item in skillsMsg" :key="item.id">
      <p>{{ item.title }}</p>

      <div class="jindu">
        <div class="jinduys" :style="'width:' + item.skills + '%'"></div>
        <div class="content">{{ item.content }}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Skill",
  props: {
    skillsMsg: Array,
  },
  mounted() {
    console.log(this.skillsMsg);
  },
};
</script>

<style lang="less" scoped>
.skill {
  display: flex;
  height: auto;
  width: 100%;
  flex-wrap: wrap;
  .list {
    width: 400px;
    display: flex;
    align-items: center;
    p {
      width: 30%;
    }
    .jindu {
      width: 200px;
      height: 3px;
      border: 1px solid white;
      position: relative;

      margin-left: 10px;
      .jinduys {
        position: absolute;

        height: 3px;
        background-color: white;
        top: 0;
        left: 0;
      }
      .content {
        display: none;
        position: absolute;
        width: 200px;
        height: 30px;
        background-color: rgb(143, 141, 141);
        top: -50px;
        font-size: 13px;
        border-radius: 3px;
        padding: 5px;
      }
    }
  }
}
.list:hover .jindu .content {
  display: block;
}
</style>